<script setup lang="ts">
import chain from '@/common/lib/chain';
const modalVisible = ref(false)
const modalTitle = '激活账号'
const account = ref('')
const publicKey = ref('')
interface window{
  msg:any
}
let window:window
const newAccount = ()=>{
  modalVisible.value = true
}
const onSubmit = async() =>{
  alert("test new account");
  const public_key = 'E'+publicKey.value.substring(1)
  console.log(public_key)
  let res=await chain.getApi().newAccount(public_key,account.value,chain.getAuth());
  console.log(res)
  // window.msg.success('new ok'+res);
  modalVisible.value = false
  account.value = ''
  publicKey.value = ''
}
</script>

<template>
  <div class="full-router">
    <div class="full-inner">
      <page-header :title="$t('public.noImport')"></page-header>
      <div class="no-account-check">
        <div  @click="$router.push({ name: 'import-key' })">
          <img src="@/assets/images/daorusiyao.svg" alt="">
          <span class="no-account-btn">{{$t('public.importAccountNow')}}</span>
          <img src="@/assets/images/youjt.svg" alt="" class="no-account-img">
        </div>
        <div @click="$router.push({ name: 'import-mnemonic' })">
          <img src="@/assets/images/zhujici.svg" alt="">
          <span class="no-account-btn">{{ $t('public.importMnemonicWords') }}</span>
          <img src="@/assets/images/youjt.svg" alt="" class="no-account-img">
        </div>
        <div class="btn-import" @click="newAccount">{{$t('public.ActivateAccount')}}</div>
      </div>
      <modal :is-show="modalVisible" :title="modalTitle" @close="modalVisible = false" @submit="onSubmit()">
        <div class="dialog-item p-4">
          <span class="label">{{ $t('setting.accountName') }}</span>
          <n-input
              v-model:value="account"
              placeholder="请输入"
          ></n-input>
        </div>
        <div class="dialog-item px-4">
          <span class="label">{{ $t('public.publicKey') }}</span>
          <n-input
              v-model:value="publicKey"
              placeholder="请输入"
          ></n-input>
        </div>
      </modal>
    </div>
  </div>
</template>

<style scoped lang="scss">
.no-account-check{
  width: 70%;
  margin: 100px auto;
}
.no-account-check>div{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.no-account-btn {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  line-height: 25px;
  color: #000000;
  border-radius: 10px;
  padding: 5px 10px;
  width: 180px;
}
.btn-import {
  width: 60%!important;
  height: 40px;
  margin: 150px auto!important;
  padding: 8px 10px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background-color: #409eff;
  border-radius: 5px;
  cursor: pointer;
}
</style>